<%--
  Created by IntelliJ IDEA.
  User: 97990
  Date: 2022/6/30
  Time: 21:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <jsp:include page="/common/head.jsp"></jsp:include>
    <title>用户更新</title>
</head>
<body>
<jsp:include page="/common/nav.jsp"></jsp:include>
<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-2 control-label">真实姓名:</label>
        <div class="col-sm-4">
            <input type="text" id="realName" class="form-control"  placeholder="请输入真实姓名">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">登录名:</label>
        <div class="col-sm-4">
            <input type="text" id="userName" class="form-control"  placeholder="请输入登录名">
        </div>
    </div>
    <div class="form-group"  style="height: 400px">
        <label class="col-sm-2 control-label">头像:</label>
        <div class="col-sm-4" style="height: 300px;">
            <input type="file" id="headImg" name="imgFile">
            <input type="hidden" id="headImgPath">
            <input type="hidden" id="newImgPath">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">性别:</label>
        <div class="col-sm-4">
            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="0">女
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">生日:</label>
        <div class="col-sm-4">
            <input type="text" class="form-control"  id="birthday">
        </div>
    </div>

    <div class="form-group" id="areaDiv">
        <label class="col-sm-2 control-label" id="areaLabel">地区:</label>
        <div class="col-sm-4">
            <p class="form-control-static" id="areaNameDiv"></p>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">工作经历:</label>
        <div class="col-sm-7" id="jobDiv">
            <button type="button" class="btn btn-primary" onclick="addJob();">
                <span class="glyphicon glyphicon-plus"></span> 增加工作经历
            </button>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" onclick="updateUser();"><span class="glyphicon glyphicon-plus"></span>更新</button>
            <button type="reset" class="btn btn-default"><i class="glyphicon glyphicon-refresh"></i>重置</button>
        </div>
    </div>
</form>

<%--工作经历模块--%>
<div id="jobModularDiv" style="display: none">
    <table class="table table-bordered" style="width: 100%">
        <tr>
            <td colspan="4">
                <button id="delJobBut" type="reset" class="btn btn-danger" onclick="delJob(this);">
                    <span class="glyphicon glyphicon-trash"></span> 删除此工作经历
                </button>
            </td>
        </tr>
        <tr>
            <td>公司名：</td>
            <td><input type="text" name="companyName" class="form-control"/></td>
            <td>职位：</td>
            <td><input type="text" name="position" class="form-control"/></td>
        </tr>
        <tr>
            <td>薪资：</td>
            <td><input type="text" name="salary" class="form-control"/></td>
            <td>时间：</td>
            <td>
                <div class="input-group">
                    <input type="text" name="startDate" class="form-control" placeholder="请输入起始日期">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
                    <input type="text" name="endDate" class="form-control" placeholder="请输入结束日期">
                </div>
            </td>
        </tr>
        <tr>
            <td>描述：</td>
            <td colspan="3">
                <textarea  type="text" name="represent" class="form-control" rows="10" cols="100"></textarea>
            </td>
        </tr>
    </table>
</div>


<jsp:include page="/common/script.jsp"></jsp:include>
<script>
    // onReady事件
    $(function () {
       initDate();//日期组件
       findUserById();//回显
    })

    //获取地址栏上的id
    var v_id = '${param.id}'

    // 初始化日期组件
    function initDate() {
        $('#birthday').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
    }

    //回显
    var user;
    function findUserById(){
        $.ajax({
            type:"get",
            url:"/user/findUserById.do",
            data:{"id":v_id},
            success:function (res){
                if (res.code == 200){

                    //初始化用户信息
                    user = res.data.userItem;
                    initUser(user)

                    //回填工作经历
                    var v_joblist = res.data.jobList;
                    initUserJob(v_joblist);

                    // 初始化工作经历日期组件
                    initDateJob();

                }
            }
        })
    }

    //用户信息回填
    function initUser(user){
        //回填用户信息
        var arr = [];
        arr.push(user.headImagePath);
        initImage(arr);//初始化头像

        $("#headImgPath").val(user.headImagePath);
        $("#realName").val(user.realName);
        $("#userName").val(user.userName);
        $("#birthday").val(user.birthday);
        $("input[name='sex']").each(function (){
            this.checked = this.value == user.sex;
        });
        $("#areaNameDiv").html(user.areaName+'&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-warning btn-sm" onclick="editSelect()"><span class="glyphicon glyphicon-pencil"></span>编辑</button>');

    }

    //用户工作经历回填
    function initUserJob(v_joblist){
        for (var i = 0; i < v_joblist.length; i++) {
            $("#jobDiv").append($("#jobModularDiv").html());
        }
        $("#jobDiv table").each(function (i){
            $("input[name='companyName']",this).val(v_joblist[i].companyName);
            $("input[name='salary']",this).val(v_joblist[i].wages);
            $("textarea[name='represent']",this).val(v_joblist[i].describe);
            $("input[name='position']",this).val(v_joblist[i].position);
            $("input[name='startDate']",this).val(v_joblist[i].startDate);
            $("input[name='endDate']",this).val(v_joblist[i].endDate);
        })
    }

    //编辑
    function editSelect(){
        //先删除之前的内容
        $("#areaNameDiv").parent().remove();
        //再增加新的下拉框
        initAreaSelect(0);
    }

    //取消编辑
    function cancleEditSelect(){
        //先删除之前的内容
        $("#areaLabel").nextAll().remove();
        //在恢复布局
        $("#areaDiv").append('<div class="col-sm-4">' +
            '<p class="form-control-static" id="areaNameDiv">' +
            '</p></div>');
        //恢复文字+按钮
        $("#areaNameDiv").html(user.areaName+'&nbsp;&nbsp;&nbsp;<button type="button" class="btn btn-warning btn-sm" onclick="editSelect()"><span class="glyphicon glyphicon-pencil"></span>编辑</button>');

    }

    //查询省市区
    function initAreaSelect(id,obj){
        //js中这样是直接判断是否有值
        if (obj){
            //$(js对象),此方法将js对象转换为jquery对象
            //parent:获取元素的上一级
            //nextAll:获取同级元素
            //remove:删除
            $(obj).parent().nextAll().remove()
        }

        $.post({
            type:"post",
            url: "/area/findAreaByFatherId.do",
            data: {"id":id},
            success:function(result){
                if (result.code == 200){
                    var v_area = result.data;
                    if (v_area.length > 0){
                        var html =  '<div class="col-sm-2" >' +//this.value是当前对象的id，this代表自身
                            '<select name="areaSelectName" class="form-control" onchange="initAreaSelect(this.value,this)">' +
                            '<option value="-1">请选择</option>';

                        for (var i = 0; i < v_area.length; i++) {
                            html += '<option value="'+v_area[i].id+'">'+v_area[i].areaName+'</option>'
                        }
                        html += '</select></div>';
                        $("#areaDiv").append(html);
                    }
                    $("#areaDiv").append('<button type="button" class="btn btn-warning btn-sm" onclick="cancleEditSelect()"><span class="glyphicon glyphicon-pencil"></span>取消编辑</button>');
                }
            }
        })
    }

    // 更新用户
    function updateUser() {
        // 空的json对象
        var param = {};

        //初始化更新用户信息
        initUpdateUser(param);

        //初始化更新用户工作经历
        initUpdateJob(param);

        $.ajax({
            type:"post",
            url:"/user/update.do",
            data:JSON.stringify(param),
            contentType:"application/json",
            // res代表就是服务端/后台对客户端/前台响应的数据
            success:function (res) {
                if (res.code == 200) {
                    location.href = "/user/toList.do";
                }
            }
        })
    }

    //更新用户信息
    function initUpdateUser(param){
        //老图片的路径
        param.headImagePath = $("#headImgPath").val();
        //新图片的路径
        param.newHeadImg = $("#newImgPath").val();
        param.id = v_id;
        param.realName = $("#realName").val();
        param.userName = $("#userName").val();
        param.birthday = $("#birthday").val();
        // 找所有name=sex的input,获取被选中的那个值
        param.sex = $("input[name='sex']:checked").val();

        // 修改下拉框
        var shengId;
        var shiId;
        var xianId;
        //如果下拉框集合的长度大于0说明修改过了
        if ($("select[name='areaSelectName']").length >0){
            //那么进来传值
            shengId = $($("select[name='areaSelectName']")[0]).val();
            shiId = $($("select[name='areaSelectName']")[1]).val();
            xianId = $($("select[name='areaSelectName']")[2]).val();
        }else {
            //否则还是原来的值，重全局user里面取
            shengId = user.shengId;
            shiId = user.shiId;
            xianId = user.xianId;
        }
        param.shengId = shengId;
        param.shiId = shiId;
        param.xianId = xianId;
    }
    //更新用户工作经历
    function initUpdateJob(param){
        //添加job数据
        param.jobList = [];
        $("#jobDiv table").each(function (){
            var v_job = {};
            v_job.companyName = $("input[name='companyName']",this).val();
            v_job.wages = $("input[name='salary']",this).val();
            v_job.describe = $("textarea[name='represent']",this).val();
            v_job.position = $("input[name='position']",this).val();
            v_job.startDate = $("input[name='startDate']",this).val();
            v_job.endDate = $("input[name='endDate']",this).val();
            param.jobList.push(v_job);
        });
    }

    //动态拼模块
    function addJob(){
        $("#jobDiv").append($("#jobModularDiv").html())
        initDateJob();
    }

    //删除拼接的模块
    function delJob(obj){
        $(obj).parents("table").remove();
    }

    // 初始化工作经历日期组件
    function initDateJob() {
        $('input[name=startDate]').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
        $('input[name=endDate]').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: 'zh-CN',
            showClear: true,
        });
    }

    // 渲染文件上传组件
    function initImage(imgArr) {
        // 配置信息
        var setting = {
            language: 'zh',
            uploadUrl: "/file/uploadImage.do", // 后台上传文件的url地址
            showUpload : false,
            showRemove : false,
            initialPreview:imgArr,
            initialPreviewAsData: true
        };
        // 渲染组件
        // 回调函数，fileuploaded
        $("#headImg").fileinput(setting).on("fileuploaded", function (event, r, previewId, index) {
            // 服务端响应给客户端的数据{code:,msg:,data:}
            var v_result = r.response;
            if (v_result.code == 200) {
                $("#newImgPath").val(v_result.data);
            }
        });
    }

</script>
</body>
</html>
